<template>
  <view id="zk_tips" :class="[toast.type ? 'seccuss' : '']" v-if="toast.show">
    <text>{{ toast.title || title }}</text>
  </view>
</template>

<script lang="ts" setup>
import { useToastStore } from "@/stores/modules/toast";

const toast = useToastStore();

defineProps({
  title: {
    type: String,
    default: "这是一条提示信息!",
  },
});
let show = ref(toast.show);
onMounted(() => {
  setTimeout(() => {
    show.value = false;
  }, 3000);
});
</script>

<style lang="scss" scoped>
#zk_tips {
  position: fixed;
  top: 8%;
  left: 50%;
  z-index: 9999999999999999999999;
  transform: translateX(-50%);
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  color: #f56c6c;
  font-family: 思源黑体;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: center;
  padding: 8px 24px;
  border-radius: 8px;
  &.seccuss {
    background-color: #f0f9eb !important;
    border: 1px solid #e1f3d8;
    color: #67c23a;
  }
}
</style>
